//导入全局css
import './lib/css/style.css'
import './sass/main.scss'

//导入库文件
import Vue from 'vue'
import Router from 'vue-router'

//导入前端框架
import Mint from 'mint-ui'

//导入ajax库
import axios from 'axios'

Vue.prototype.$http = axios;

//登陆模块导入
import login from './page/login.vue'

//路由页面导入
import Index from './page/index.vue'
import Login from './page/login.vue'
import register from './page/register.vue'


Vue.component('login-box', login);

//导入UI库
Vue.use(Mint);

//导入路由
Vue.use(Router);

const routes = [
  { 
    path: '/', 
    component: Login
  },
  {
    path: '/register',
    component: register
  },
  {
    path: '/Index',
    component: Index
  }
]

//router实例
const router = new Router({
  routes // （缩写）相当于 routes: routes
});

//让子模块能访问router;
Vue.prototype.$rt = router;

const app = new Vue({
  el: '#app',
  data: {
    transitionName : 'fade',
    showLoadPanel : false,
    loaded : false,
    loadAnimate : 'fade'
  },

  methods : {                   
    
  },

  router: router,

  created() {
    
  },

  watch: {
    '$route' (to, from) {
      this.showLoadPanel = false;

      // console.log('to', to.path,to.path.split('/').filter( (v)=>{
      //   return !!v
      // }));
      // console.log('from', from.path,from.path.split('/').filter(v => {
      //   return !!v
      // }));

      const toDepth = to.path.split('/').filter( v => {
        return !!v
      }).length;
      const fromDepth = from.path.split('/').filter( v => {
        return !!v
      }).length;
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left';
    }
  }
});

router.afterEach(route => {
  // ...
  var name = app.$data.transitionName;
  //app.$data.transitionName = name == 'slide-right' ? 'slide-left' : 'slide-right'
})